/*!
 _________
|   🚥   |\
| ~~~~~~~ |_\
|  badge |
| ~~~~~~~ |
| ~~~~~~~ |
|_________|
*/
@import './_prefix.less';
.@{prefix}-badge {
    width: 20rpx;
    height: 20rpx;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    vertical-align: middle;
    background-color: currentColor;
    position: relative;
    font-size: 18rpx;
    &.max {
        width: 34rpx;
        height: 34rpx;
        line-height: 34rpx;
    }
    &.dot {
        width: 16rpx;
        height: 16rpx;
    }
    &:not([class*='@{prefix}-icon-'])::before {
        content: attr(data-text);
        color: #fff;
    }
    &[class*='@{prefix}-icon-'] {
        background-color: transparent;
        font-size: 24rpx;
        &::before {
            color: currentColor;
        }
    }
    &.animation {
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            border: 1rpx solid currentColor;
            animation: badge-animation 1.2s infinite ease-in-out;
        }
        @keyframes badge-animation {
            from {
                transform: scale(.8);
                opacity: 1
            }
            to {
                transform: scale(2.4);
                opacity: 0
            }
        }
    }
}